<template>
  <div id="Process">
    <div class="title">
      工序信息
    </div>
    <div class="function">
      <el-row :gutter="10">
        <el-col :span="1">
          <el-button type="primary" @click="popUpShow.addPopup=true,data.isAdd=true">新增</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="selectAll">查询全部</el-button>
        </el-col>
        <el-col :span="21">
          <div class="select">
            <div class="input">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="名称:" prop="fOrgCategory">
                    <el-input v-model="data.name" @keyup.enter="selectAll"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-table :data="data.gd" border style="width: 100%;height: 58vh;" v-loading="data.zt">
            <el-table-column prop="fCode" label="编号"/>
            <el-table-column prop="fDCode" label="工段编号"/>
            <el-table-column prop="fName" label="名称" width="120"/>
            <el-table-column prop="fPreCheck" label="检查前置工具" width="120">
              <template #default="{ row }">
                <span>{{ row.fPreCheck === 0 ? '否':'是'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fPreCheckCode" label="前置工具编号" width="120"/>
            <el-table-column prop="fDName" label="工段名称"/>
            <el-table-column prop="fWorkTime" label="加工时间"/>
            <el-table-column prop="fCreateUserId" label="录入人"/>
            <el-table-column prop="fCreatorTime" label="录入时间"/>
            <el-table-column prop="fLastModifyUserId" label="最后修改人"/>
            <el-table-column prop="fLastModifyTime" label="最后修改时间"/>
            <el-table-column prop="fRemark" label="备注"/>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="{ row }">
                <el-button link type="primary" size="small" @click="onHandleEdit(row,0)">编辑</el-button>

                <el-button link type="primary" size="small" @click="onHandleDel(row,0)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <!-- :current-page="pageData.queryParams.page" -->
          <el-pagination style="margin-top: 20px" layout="total, sizes, prev, pager, next, jumper"
                         :page-size="pageInf.gd.pagesize" :current-page="pageInf.gd.page" :total="pageInf.gd.sumPage"
                         @current-change="onHandleCurrentChange"
                         @size-change="onHandleSizeChange">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="popUpShow.aditPopup" title="工段信息详情">
      <el-form :model="aditForm">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="工序编号:" :label-width="formLabelWidth">
              <el-input v-model="aditForm.fCode" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:" :label-width="formLabelWidth">
              <el-input disabled value="草稿" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工序名称:" :label-width="formLabelWidth">
              <el-input v-model="aditForm.fName" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工段编号:" :label-width="formLabelWidth">
              <el-input v-model="aditForm.fDCode" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工段名称:" :label-width="formLabelWidth">
              <el-input v-model="aditForm.fDName" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加工时间:" :label-width="formLabelWidth">
              <el-input v-model="aditForm.fWorkTime" autocomplete="off" type="number" min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" :label-width="formLabelWidth">
              <el-input v-model="aditForm.fRemark" autocomplete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="popUpShow.aditPopup = false">取消</el-button>
					<el-button type="primary" @click="adit">
						修改
					</el-button>
				</span>
      </template>
    </el-dialog>
    <el-dialog v-model="popUpShow.addPopup" :title="(!(data.isAdd))?'工段信息详情':'新增工序信息'">
      <el-form :model="addForm" v-loading="data.addTc">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="工序编号:" :label-width="formLabelWidth">
              <el-input v-model="addForm.fCode" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:" :label-width="formLabelWidth">
              <el-input disabled value="草稿" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工序名称:" :label-width="formLabelWidth">
              <el-input v-model="addForm.fName" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工段编号:" :label-width="formLabelWidth">
              <el-input v-model="addForm.fDCode" autocomplete="off">
                <template #append>
									<span @click="popUpShow.chiadPopup=true"
                        style="cursor: pointer;width: 100%;height: 100%;font-weight: 800;font-size: 0.9375rem;">
										…
									</span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工段名称:" :label-width="formLabelWidth">
              <el-input v-model="addForm.fDName" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加工时间:" :label-width="formLabelWidth">
              <el-input v-model="addForm.fWorkTime" autocomplete="off" type="number" min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否检查前置工具:" :label-width="formLabelWidth">
              <el-select v-model="addForm.fPreCheck">
                <el-option :label="'否'" :value="0">否</el-option>
                <el-option :label="'是'" :value="1">是</el-option>
              </el-select>
              <!--                            <el-input v-model="aditForm.fPreCheck" autocomplete="off"/>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查前置工具编号:" :label-width="formLabelWidth">
              <el-input v-model="addForm.fPreCheckCode" autocomplete="off">
                <template #append>
									<span @click="popUpShow.frontTool =true"
                        style="cursor: pointer;width: 100%;height: 100%;font-weight: 800;font-size: 0.9375rem;">
										…
									</span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" :label-width="formLabelWidth">
              <el-input v-model="addForm.fRemark" autocomplete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="popUpShow.addPopup = false">取消</el-button>
					<el-button type="primary" @click="(!(data.isAdd))?(adit()):(add())">
						{{ (!(data.isAdd)) ? '修改' : '新增' }}
					</el-button>
				</span>
      </template>
    </el-dialog>
    <el-dialog v-model="popUpShow.chiadPopup" title="选择">
      <div class="select-cont">
        <div class="selecetHead">
          <el-row :gutter="10">
            <el-col :span="5">
              <el-select @change="jdSelect" v-model="pageInf.chid.pagesize" class="m-2" placeholder="Select">
                <el-option v-for="i in 10" :key="10*i" :label="'显示'+(10*i)+'条'" :value="(10*i)"/>
              </el-select>
            </el-col>
            <el-col :span="2">
              总条数:{{ pageInf.chid.sumPage }}
            </el-col>
            <el-col :span="5">
              <el-input v-model="data.chidName" @keyup.enter="jdSelect"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" plain @click="jdSelect">
                简单查询
              </el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" plain>
                方案查询
              </el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tab">
          <div class="li">
            查询结果
          </div>
          <div class="li">
            查询方案
          </div>
        </div>
        <div class="table">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-table :data="data.chidTable" border style="width: 100%;height: 40vh;">
                <el-table-column prop="fCode" label="工段编号"/>
                <el-table-column prop="fName" label="工段名称"/>
                <el-table-column prop="fId" label="内码编号"/>
                <el-table-column fixed="right" label="操作" width="80" align="center">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="onHandleEdit(row,1)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="popUpShow.frontTool" title="选择前置工具">
      <div class="select-cont">
        <div class="selecetHead">
          <el-row :gutter="10">
            <el-col :span="5">
              <el-select v-model="jspPageData.size" class="m-2" placeholder="Select">
                <el-option v-for="i in 10" :key="10*i" :label="'显示'+(10*i)+'条'" :value="(10*i)"/>
              </el-select>
            </el-col>
            <el-col :span="2">
              总条数:{{ jspTotal }}
            </el-col>
            <el-col :span="5">
              <el-input v-model="jspPageData.fName" @keyup.enter="jspCheck"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" plain @click="jspCheck">
                简单查询
              </el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" plain>
                方案查询
              </el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tab">
          <div class="li">
            查询结果
          </div>
          <div class="li">
            查询方案
          </div>
        </div>
        <div class="table">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-table :data="jspList" border style="width: 100%;height: 40vh;">
                <el-table-column prop="fCode" label="工段编号"/>
                <el-table-column prop="fName" label="工段名称"/>
                <el-table-column prop="fId" label="内码编号"/>
                <el-table-column fixed="right" label="操作" width="80" align="center">
                  <template #default="{ row }">
                    <el-button type="primary" size="small" @click="onJspSelect(row,1)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import ajax from '../../../../public/JavaScript/api/ajax.js';
import date from '../../../../public/JavaScript/until/fromatDate.js';
import {
  ref,
  reactive,
  watch,
  onMounted
} from 'vue';
import {
  ElMessage,
  ElMessageBox
} from 'element-plus'

let popUpShow = reactive({
  aditPopup: false, //编辑弹窗是否显示
  addPopup: false,//新增弹窗是否显示
  chiadPopup: false,	//子弹窗是否显示
  frontTool: false, // 前置工具是否显示
})
const formLabelWidth = '140px' //编辑表单宽度
let aditForm = reactive({ //编辑弹窗表单

})
let addForm = reactive({ //新增弹窗表单

})
let data = reactive({
  gd: [],
  name: '',
  zt1: false,
  aditTc: false,
  addTc: false,
  chidTable: [],		//子表格数据
  chidTC: false,
  chidName: '',
  popTitle: true
})
let pageInf = reactive({
  gd: {
    pagesize: 10,
    page: 1,
    sumPage: 0
  },
  chid: {
    pagesize: 20,
    page: 1,
    sumPage: 0
  }
});

// 工序信息
const jspPageData = ref({
  fName: "",
  page: 1,
  size: 20,
});
const jspTotal = ref(0);
const jspList = ref([]);
const jspCheck = () => {
  ajax.post("/wpc/simjsp", {body: jspPageData.value}, res => {
    if (res.code === 200) {
      console.log(res.data.list);
      jspList.value = res.data.list;
    }
  });
};
const onJspSelect = (row, type) => {
  if (type === 1) {
    addForm.fPreCheck = 1;
    addForm.fPreCheckCode = row.fCode;
    popUpShow.frontTool = false;
  }
};

/* 当前页变换 */
function onHandleCurrentChange(ev) {
  pageInf.gd.page = ev
  selectAll()
}

/* 当前显示数变换 */
function onHandleSizeChange(ev) {
  pageInf.gd.pagesize = ev
  selectAll()
}

/* 编辑 */
function onHandleEdit(ev, type) {
  if (type == 0) {
    popUpShow.addPopup = true
    data.isAdd = false
    sCOPY(addForm, ev)
  } else if (type == 1) {
    console.log(ev)
    addForm.fDCode = ev.fCode
    addForm.fDName = ev.fName
    popUpShow.chiadPopup = false
  }
}

/* 深拷贝 */
function sCOPY(start, end) {
  for (let i in end) {
    start[i] = JSON.parse(JSON.stringify(end[i]))
  }
}

/* 对象赋空 */
function clearObj(obj) {
  for (let i in obj) {
    obj[i] = ''
  }
}

/* 删除 */
function onHandleDel(ev) {
  ElMessageBox.confirm(
      '是否删除该条工段信息?',
      '删除提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        fetch(ajax.url + '/zn/wpc/del/' + ev.fId, {
          method: "POST",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'token': sessionStorage.getItem('token')
          }
        }).then(data => {
          data.json().then(res => {
            if (res.code == 200) {
              ElMessage({
                message: '删除成功！',
                type: 'success',
              })
              selectAll()
            } else {
              ElMessage.error(res.msg)
            }
          })
        })
      })
      .catch(() => {
        console.log(9)
      })
}

function adit() {		//确认修改
  ajax.post('/wpc/update', {
    body: addForm
  }, res => {
    console.log(res)
    if (res.code == 200) {
      ElMessage({
        message: '修改成功！',
        type: 'success',
      })
      selectAll()
      popUpShow.addPopup = false
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error(res.msg)
  })
}

function add() {		//确认新增
  // popUpShow.addPopup=false
  console.log(addForm)
  data.addTc = true
  ajax.post('/wpc/save', {
    body: addForm
  }, res => {
    console.log(res, addForm)
    if (res.code == 200) {
      ElMessage({
        message: '添加成功！',
        type: 'success',
      })
      selectAll()
      clearObj(addForm)
      data.addTc = false
      popUpShow.addPopup = false
    } else {
      data.addTc = false
      ElMessage.error(res.msg)
    }
  }, err => {
    data.addTc = false
    ElMessage.error(res.msg)
  })
}

const tableData = []
onMounted(() => {

})

function selectAll() {
  data.zt1 = true
  ajax.post('/wpc/jsp', {
    body: {
      "fName": data.name,
      "page": pageInf.gd.page,
      "size": pageInf.gd.pagesize
    }
  }, res => {
    if (res.code == 200) {
      if (res.data.totalCount == 0) {
        ElMessage({
          message: '数据库数据为空！',
          type: 'error',
        })
      } else {
        console.log(res)
        data.gd = res.data.list
        pageInf.gd.sumPage = res.data.totalCount
        data.zt = false
        data.name = ''
        ElMessage.success('查询成功')
      }
    } else {
      ElMessage.error(res.msg)
    }
  }, err => {
    ElMessage.error("网络连接失败！")
  })
}

function jdSelect() {		//简单查询
  data.chidTC = true
  ajax.post('/wsc/simjsp', {
    body: {
      "fName": data.chidName,
      "page": 1,
      "size": pageInf.chid.pagesize
    }
  }, res => {
    console.log(res)
    if (res.code == 200) {
      ElMessage({
        message: '查询成功！',
        type: 'success',
      })
      data.chidTC = false
      if (res.data.totalCount == 0) {
        ElMessage.error('查询数据列表为空！')
        data.chidTC = false
      }
      data.chidTable = res.data.list
      data.chidName = ''
      pageInf.chid.sumPage = res.data.totalCount
    } else {
      ElMessage.error(res.msg)
      data.chidTC = false
    }
  }, err => {
    ElMessage.error(res.msg)
    data.chidTC = false
  })
}

watch(() => {
  popUpShow.addPopup
}, () => {
  if (!popUpShow.addPopup) {
    clearObj(addForm)
  }
}, {deep: true})
</script>

<style lang="less" scoped>
@import url("./Process.less");
</style>
2